<template>
  <div >
    <div class="search-common">
      <el-row class=" pt10">
      <el-button type="primary" size="mini" @click="$router.push({name:'menu_notice_add',query:{id:''}})">发布公告</el-button>
      </el-row>
      <el-row class="mt10 pt10">
      <el-form :inline="true" :model="noticeForm" size="mini" class="demo-form-inline" >
        <el-row>
          <el-col :sm="6">
             <el-form-item label="发布状态">
            <el-select v-model="noticeForm.noticeState" placeholder="发布状态">
               <el-option label="全部" value=""></el-option>
                <el-option label="待发布" value="0"></el-option>
                <el-option label="已发布" value="1"></el-option>
                <el-option label="已停用" value="2"></el-option>
            </el-select>
        </el-form-item>

          </el-col>
          <el-col :sm="6">
 <el-form-item label="发布范围">
            <el-select v-model="noticeForm.noticeArea" placeholder="发布范围">
                <el-option label="不限" value=""></el-option>
                <el-option label="仅讲师" value="1"></el-option>
                <el-option label="全体" value="0"></el-option>
            </el-select>
        </el-form-item>

          </el-col>
          <el-col :sm="6">
             <el-form-item label="经纪商">
            <el-select v-model="noticeForm.noticeAngent" placeholder="经纪商">
               <el-option label="全部" value=""></el-option>
                <el-option label="所有" value="0"></el-option>
                <el-option 
                v-for="item of getAngents"
                :key="item.id"
                :label="item.name"
                :value="item.key"
               ></el-option>
                <el-option label="无绑定用户" value="-1"></el-option>
            </el-select>
        </el-form-item>

          </el-col>
        </el-row>


        <el-row>
          <el-col>
          <el-form-item label="发布时间">
           <el-date-picker
                v-model="noticeForm.noticeDate"
                type="daterange"
                range-separator="至"
                value-format="yyyy-MM-dd"
                start-placeholder="开始日期"
                :picker-options="pickerOptions"
                end-placeholder="结束日期">
            </el-date-picker>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
             <el-button type="default" @click="onReset">重置</el-button>
        </el-form-item>

          </el-col>
        </el-row>
       
       
        
        
    </el-form>
      </el-row>
    </div>
     <div class="pl20 pr20 mt10" style="background:#fff" v-loading="loading">
            <br/>
      <el-table :data="tableData" border size="mini" style="width: 100%">
        <el-table-column prop="scope" width="" label="发布范围">
           <template slot-scope="scope">
               {{scope.row.scope=='0'?'全体':(scope.row.scope=='1'?'讲师':'其他')}}
             </template>
        </el-table-column>
        <el-table-column prop="title"  label="标题">
        </el-table-column>
          <el-table-column prop="oper_admin"  label="发布人">
        </el-table-column>
          <el-table-column   label="经纪商">
             <template slot-scope="scope">
            {{scope.row.agent_num | filterAgent}}
             </template>
        </el-table-column>

          <el-table-column prop="status"  label="状态">
             <template slot-scope="scope">
               {{scope.row.status=='-1'?('已删除'):(scope.row.status=='0'?'已保存':scope.row.status=='1'?'已发布':scope.row.status=='2'?'已停用':'其他')}}
             </template>
        </el-table-column>
          <el-table-column prop="create_time"  label="创建时间">
        </el-table-column>
        <el-table-column prop="address" label="操作" style="width:10%;">
          <template slot-scope="scope">
              <el-button  type="text" size="small" @click="$router.push({name:'menu_notice_add',query:{id:scope.row.id}})">编辑</el-button>
            <el-button  type="text" size="small" @click="opeationNotice(scope.row)">
              <!-- 停用 -->
           {{(scope.row.status=='0'?'发布':scope.row.status=='1'?'停用':scope.row.status=='2'?'启用':'其他')}}
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- <div class="block mt10 tc mb10">
        <el-pagination background @current-change="handleCurrentChange" :current-page.sync="page" :page-size="pageSize" layout="total, prev, pager, next" :total="total">
        </el-pagination>
        <br>
      </div> -->
<page-pagination 
      v-on:pageFun="pageFunNumber" 
      :page="page" 
      :pageSize="pageSize" 
      :total="total">
    </page-pagination>

    </div>
   
  </div>

</template>

<style scoped>
.el-table__body {
  /* width: 99%!important; */
  table-layout: inherit !important;
}
</style>


<script>
import server from "@/service/index_c";
import pagePagination from "@/components/Common/pagePagination";
import {mapGetters} from 'vuex';
export default {
  components:{
    pagePagination
  },
  data() {
    return {
      loading: false,
      page: 0,
      pageSize: 15,
      total: 0,
      tableData: [],
      noticeForm: {
        noticeState: "",
        noticeArea: "",
        noticeAngent: "",
        noticeDate: ""
      },
      pickerOptions: {
          disabledDate(time) {
            return time.getTime() > Date.now();
          },
      }
    };
  },
created(){
    this.$store.dispatch('setAllAngentLists')
},
  mounted() {
    this.queryHaiheiNoticeListItem();
  
  },
  computed:{
    ...mapGetters({
      getAngents:'getAllAngentLists',
    
    })
  },
 
  methods: {
    async queryHaiheiNoticeListItem(page = 1) {
      this.loading=true
      let params = {
        page: page,
        pageSize: this.pageSize,
        status: this.noticeForm.noticeState,
        scope: this.noticeForm.noticeArea,
        agent_num: this.noticeForm.noticeAngent,
        startDate: this.noticeForm.noticeDate?this.noticeForm.noticeDate[0]:'',
        endDate: this.noticeForm.noticeDate?this.noticeForm.noticeDate[1]:''
      };
      let resultData = await server.haiheiNoticeListItem(params);
      if (resultData.success) {
        this.tableData = resultData.result.pageList;
        this.page = resultData.result.page;
        this.total = resultData.result.nums;
         this.loading=false;
      }
    },
    //操作公告
   async opeationNotice(row) {
      let st=row.status=='0'?'1':(row.status=='1'?'2':row.status=='2')?'1':'0';
      console.log({id:row.id,status:st})
      let resultData = await server.haiheiUpdateNoticeListItem({id:row.id,status:st});
      if(resultData.success){
        row.status=st;
        this.$message({
          type:'success',
          message:'设置成功'
        })
      }else{

      }
    },
    editNotice(){},
    //查询
    onSubmit() {
      this.queryHaiheiNoticeListItem();
    },
    // 重置
    onReset(){
      this.noticeForm= {
        noticeState: "",
        noticeArea: "",
        noticeAngent: "",
        noticeDate: ""
      }
      this.queryHaiheiNoticeListItem();
    },
    //分页
    pageFunNumber(page) {
      this.queryHaiheiNoticeListItem(page);
    }
  }
};
</script>
